<script setup lang="ts">
import PageContainer from '@/components/PageContainer.vue';
import handleApply from './components/handleApply.vue'
import { formatTime } from '@/utils/format';
import { ref, provide } from 'vue';
import { pageApply, getIdentity } from '@/service/api';

const params = ref({
    pageNum: 1,
    pageSize: 10,
})
const applyList = ref<any>([])
const total = ref()
const visible = ref(false)
const getApplyList = async () => {
    await pageApply(params.value).then(res => {
        applyList.value = res.data.data.list
        total.value = res.data.data.total
    })
}
getApplyList()
provide("getApplyList",getApplyList)
// 同意主播申请
const applyRef = ref()
const agreeApply = (row: any) => {
    applyRef.value.open(row)
    applyRef.value.agree()
}
//拒绝
const refuseApply = (row:any) =>{
    applyRef.value.open(row)
    applyRef.value.refuse()
}
const identity = ref<any>({})
//获取身份认证id
const identityId = async (id: any) => {
    await getIdentity(id).then(res => {
        identity.value = res.data.data
        visible.value = true
    }).catch(err => {
        console.log(err);
    })
}

provide('identityData', identity)
//分页，每页条数
const pageSizeChangeHandle = (val: number) => {
    params.value.pageSize = val;
    params.value.pageNum = 1;
    getApplyList()
}
//分页，当前页
const pageCurrentChangeHandle = (val: number) => {
    params.value.pageNum = val;
    getApplyList()
}


</script>

<template>
    <div>
        <PageContainer title="主播申请">
            <div class="mod-web__admin">
                <el-table :data="applyList">
                    <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
                    <el-table-column prop="userId" label="用户id" header-align="center" align="center"></el-table-column>
                    <el-table-column prop="appleDate" label="申请时间" header-align="center" align="center">
                        <template #default="{ row }">
                            {{ formatTime(row.appleDate) }}
                        </template>
                    </el-table-column>
                    <el-table-column prop="passFlag" label="状态" sortable header-align="center" align="center">
                        <template #default="{ row }">
                            <el-tag v-if="row.passFlag === 0">待处理</el-tag>
                            <el-tag v-else type="danger">驳回</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column prop="informationId" label="身份认证信息">
                        <template #default="{ row }">
                            <el-button type="primary" link @click="identityId(row.informationId)">查看身份认证信息</el-button>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" header-align="center" align="center" width="150" label="处理申请">
                        <template #default="{ row }">
                            <el-button type="primary" link @click="agreeApply(row)">同意</el-button>
                            <el-button type="danger" link @click="refuseApply(row)">驳回</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 处理申请-->
                <handleApply ref="applyRef"></handleApply>
                <!-- <identity ref="identityRef"></identity> -->
                <div class="page">
                    <el-pagination :page-sizes="[10, 15, 20]" layout="total, sizes, prev, pager, next,jumper"
                        :total="total" v-model:current-page="params.pageNum" v-model:page-size="params.pageSize"
                        @size-change="pageSizeChangeHandle" @current-change="pageCurrentChangeHandle" />
                </div>
            </div>
        </PageContainer>
        <el-dialog v-model="visible" :close-on-click-modal="false" :close-on-press-escape="false">
            <el-form ref="dataFormRef" label-width="120px">
                <el-form-item label="姓名" prop="realName">
                    {{ identity.realName }}
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    {{ identity.sex === 0 ? '女' : '男' }}
                </el-form-item>
                <el-form-item label="地址" prop="address">
                    {{ identity.address }}
                </el-form-item>
                <el-form-item label="身份证号" prop="idCard">
                    {{ identity.idCard }}
                </el-form-item>
                <el-form-item label="身份证正面" prop="frontalView">
                    <img width="300px" :src="identity.frontalView" alt="">
                </el-form-item>
                <el-form-item label="身份证反面" prop="reverseView">
                    <img width="300px" :src="identity.reverseView" alt="">
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>

</template>

<style scoped lang="less">
.page {
  position: relative;
  display: flex;
  justify-content: center;
  margin: auto;
  top: 90%
}
</style>